<template>
    <el-dialog
        :title="title"
        :visible.sync="visible"
        width="500px"
        :before-close="handleClose">
           <el-form ref="formData" :rules="rules" :model="formData" label-width="100px" label-position="right" style="width:400px" status-icon>
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-radio-group v-model="formData.status" style="width:300px">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序：" prop="sort">
                      <el-input-number v-model="formData.sort" :min="1" :max="1000"  style="width:300px">
                      </el-input-number>
                </el-form-item>
                 <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="formData.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('formData')" size="mini">确定</el-button>
                    <el-button size="mini" @click="handleClose">取消</el-button>
                </el-form-item>
                </el-form>
        </el-dialog>
</template>
<script>
import api from "@/api/category"
export default{
    props:{
        title:{ //弹窗的标题
            type:String,
            default:''
        },
        visible:{ //弹出窗口，true就弹出
            type:Boolean,
            default:false
        },
        formData:{ // 表单提交的数据
            type:Object,
            default:{}
        },
        remoteClose:Function //父组件传过来的函数
    },
    data(){
        return {
            rules:{
                name:[
                    {required:true,message:"请输入分类名称",trigger:'blur'},
                ],
                status:[
                    {required:true,message:"请选择状态",trigger:'change'},
                ],
                sort:[
                    {required:true,message:"请选择排序号",trigger:'change'},
                ]
            }
        }   
    },
    methods:{
        //关闭窗口
        handleClose(){
            //关闭前重置表单
            this.$refs['formData'].resetFields()
            //不可已通过this.visible = false来关闭
            this.remoteClose()
        }, 
        //提交表单数据
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                    if (valid) {
                       //校验通过，提交表单数据
                       this.submitData()
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
            });
        },
        async submitData(){
            let responce = null
            if(this.formData.id){
                //编辑
                 responce = await api.update(this.formData)
            }else{
                //新增
                 responce = await api.add(this.formData)            
            }
           
            if(responce.code === 20000){
                this.$message({
                showClose: true,
                message:responce.message,
                type: 'success'
                });
                this.handleClose()
            }else{
                this.$message({
                showClose: true,
                message:"新增失败",
                type: 'success'
                });
            }
        }
    }
}
</script>

